<template>
  <div class="parent">
    <px-radio-group v-model="bian" size="small" @change="setBian">
      <px-radio-button label="双边" />
      <px-radio-button label="上单边" />
      <px-radio-button label="下单边" />
    </px-radio-group>
    <echartsDom v-if="isShowEcharts" :width="width" :height="height" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref, watch } from "vue";
import echartsDom from "./echartsDom.vue";
const bian = ref("双边");
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  startValue: {
    type: Number,
    default: 0
  },
  name: {
    type: String,
    default: ""
  },
  step: {
    type: Number,
    default: 0
  },
  usl: {
    type: Number,
    default: 0
  },
  ucl: {
    type: Number,
    default: 0
  },
  uwl: {
    type: Number,
    default: 0
  },
  target: {
    type: Number,
    default: 0
  },
  lwl: {
    type: Number,
    default: 0
  },
  lcl: {
    type: Number,
    default: 0
  },
  lsl: {
    type: Number,
    default: 0
  },
  SpcAnalysis: {
    type: Object,
    required: true
  }
});

const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  chartsList: []
});
const setBian = val => {
  if (val == "双边") {
    setdata();
  }
  if (val == "上单边") {
    setdata2();
  }
  if (val == "下单边") {
    setdata3();
  }
};
function formatDate(timestamp) {
  const date = new Date(timestamp);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const day = date.getDate().toString().padStart(2, "0");
  const h = date.getHours().toString().padStart(2, "0");
  const m = date.getMinutes().toString().padStart(2, "0");
  const s = date.getSeconds().toString().padStart(2, "0");
  return `${year}-${month}-${day} ${h}:${m}:${s}`;
}
console.log(props);
const { option, chartsList } = toRefs(state);
isShowEcharts.value = true;
watch(
  () => props.SpcAnalysis,
  newOption => {
    if (newOption.length > 0) {
      chartsList.value = newOption;
      setdata();
    } else {
      chartsList.value = [];
    }
    console.log(newOption);
  }
);
watch(
  () => props.name,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.startValue,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.step,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.usl,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.ucl,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.uwl,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.target,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.lwl,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.lcl,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);
watch(
  () => props.lsl,
  newOption => {
    setdata();
    bian.value = "双边";
  }
);

const setdata = () => {
  let maxNum = null;
  if (props.usl && props.usl != 0) {
    maxNum = props.usl;
  } else if (props.ucl && props.ucl != 0) {
    maxNum = props.ucl;
  } else if (props.uwl && props.uwl != 0) {
    maxNum = props.uwl;
  } else if (props.target && props.target != 0) {
    maxNum = props.target;
  } else if (props.lwl && props.lwl != 0) {
    maxNum = props.lwl;
  } else if (props.lcl && props.lcl != 0) {
    maxNum = props.lcl;
  } else if (props.lsl && props.lsl != 0) {
    maxNum = props.lsl;
  }
  option.value = {
    color: [props.color],
    grid: {
      left: "20px",
      top: "40px",
      right: "100px",
      bottom: "10px",
      containLabel: true
    },
    // legend: {},
    tooltip: {
      trigger: "axis",
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: chartsList.value.length > 0 ? chartsList.value.map(item => formatDate(item.time)) : ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
    },
    yAxis: {
      name: "",
      type: "value",
      max: maxNum,
      min: props.startValue || 0,
      interval: props.step
    },
    series: [
      {
        // data: [400, 400, 400, 400, 400, 400],
        data: chartsList.value.length > 0 ? chartsList.value.map(item => item.value) : [],
        type: "line",
        name: props.name,
        // areaStyle: {
        //   opacity: 0.15
        // },
        // symbol: "none",
        markLine: {
          symbol: "none",
          data: [
            {
              name: "USL值",
              yAxis: Number(props.usl) ? Number(props.usl) : 9999999999999,
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "end",
                formatter: `USL值${props.usl}`,
                color: "#A600FF"
              }
            },
            {
              name: "UCL值",
              yAxis: Number(props.ucl) ? Number(props.ucl) : 9999999999999,
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `UCL值${props.ucl}`,
                color: "#FF0000"
              }
            },
            {
              name: "UWL值",
              yAxis: Number(props.uwl) ? Number(props.uwl) : 9999999999999,
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `UWL值${props.uwl}`,
                color: "#FF9900"
              }
            },
            {
              name: "Target值",
              yAxis: Number(props.target) ? Number(props.target) : 9999999999999,
              lineStyle: {
                color: "#00E272",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "end",
                formatter: `Target值${props.target}`,
                color: "#00E272"
              }
            },
            {
              name: "LWL值",
              yAxis: Number(props.lwl) ? Number(props.lwl) : 9999999999999,
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `LWL值${props.lwl}`,
                color: "#FF9900"
              }
            },
            {
              name: "LCL值",
              yAxis: Number(props.lcl) ? Number(props.lcl) : 9999999999999,
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `LCL值${props.lcl}`,
                color: "#FF0000"
              }
            },
            {
              name: "LSL值",
              yAxis: Number(props.lsl) ? Number(props.lsl) : 9999999999999,
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "end",
                formatter: `LSL值${props.lsl}`,
                color: "#A600FF"
              }
            }
          ]
        }
      }
    ]
  };
};

const setdata2 = () => {
  let maxNum = null;
  if (props.usl && props.usl != 0) {
    maxNum = props.usl;
  } else if (props.ucl && props.ucl != 0) {
    maxNum = props.ucl;
  } else if (props.uwl && props.uwl != 0) {
    maxNum = props.uwl;
  } else if (props.target && props.target != 0) {
    maxNum = props.target;
  } else if (props.lwl && props.lwl != 0) {
    maxNum = props.lwl;
  } else if (props.lcl && props.lcl != 0) {
    maxNum = props.lcl;
  } else if (props.lsl && props.lsl != 0) {
    maxNum = props.lsl;
  }
  option.value = {
    color: [props.color],
    grid: {
      left: "20px",
      top: "40px",
      right: "100px",
      bottom: "10px",
      containLabel: true
    },
    // legend: {},
    tooltip: {
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
    },
    yAxis: {
      name: "",
      type: "value",
      max: maxNum,
      min: props.startValue || 0,
      interval: props.step
    },
    series: [
      {
        // data: [400, 400, 400, 400, 400, 400],
        type: "line",
        name: props.name,
        // areaStyle: {
        //   opacity: 0.15
        // },
        symbol: "none",
        markLine: {
          symbol: "none",
          data: [
            {
              name: "USL值",
              yAxis: Number(props.usl) ? Number(props.usl) : 9999999999999,
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "end",
                formatter: `USL值${props.usl}`,
                color: "#A600FF"
              }
            },
            {
              name: "UCL值",
              yAxis: Number(props.ucl) ? Number(props.ucl) : 9999999999999,
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `UCL值${props.ucl}`,
                color: "#FF0000"
              }
            },
            {
              name: "UWL值",
              yAxis: Number(props.uwl) ? Number(props.uwl) : 9999999999999,
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `UWL值${props.uwl}`,
                color: "#FF9900"
              }
            },
            {
              name: "Target值",
              yAxis: Number(props.target) ? Number(props.target) : 9999999999999,
              lineStyle: {
                color: "#00E272",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "end",
                formatter: `Target值${props.target}`,
                color: "#00E272"
              }
            }
          ]
        }
      }
    ]
  };
};
const setdata3 = () => {
  let maxNum = null;
  if (props.usl && props.usl != 0) {
    maxNum = props.usl;
  } else if (props.ucl && props.ucl != 0) {
    maxNum = props.ucl;
  } else if (props.uwl && props.uwl != 0) {
    maxNum = props.uwl;
  } else if (props.target && props.target != 0) {
    maxNum = props.target;
  } else if (props.lwl && props.lwl != 0) {
    maxNum = props.lwl;
  } else if (props.lcl && props.lcl != 0) {
    maxNum = props.lcl;
  } else if (props.lsl && props.lsl != 0) {
    maxNum = props.lsl;
  }
  option.value = {
    color: [props.color],
    grid: {
      left: "20px",
      top: "40px",
      right: "100px",
      bottom: "10px",
      containLabel: true
    },
    // legend: {},
    tooltip: {
      confine: true
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: ["11:00", "12:00", "13:00", "14:00", "15:00", "16:00"]
    },
    yAxis: {
      name: "",
      type: "value",
      max: maxNum,
      min: props.startValue || 0,
      interval: props.step
    },
    series: [
      {
        // data: [400, 400, 400, 400, 400, 400],
        type: "line",
        name: props.name,
        // areaStyle: {
        //   opacity: 0.15
        // },
        symbol: "none",
        markLine: {
          symbol: "none",
          data: [
            {
              name: "Target值",
              yAxis: Number(props.target) ? Number(props.target) : 9999999999999,
              lineStyle: {
                color: "#00E272",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "end",
                formatter: `Target值${props.target}`,
                color: "#00E272"
              }
            },
            {
              name: "LWL值",
              yAxis: Number(props.lwl) ? Number(props.lwl) : 9999999999999,
              lineStyle: {
                color: "#FF9900",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `LWL值${props.lwl}`,
                color: "#FF9900"
              }
            },
            {
              name: "LCL值",
              yAxis: Number(props.lcl) ? Number(props.lcl) : 9999999999999,
              lineStyle: {
                color: "#FF0000",
                wideh: "1",
                type: "dashed"
              },
              label: {
                position: "end",
                formatter: `LCL值${props.lcl}`,
                color: "#FF0000"
              }
            },
            {
              name: "LSL值",
              yAxis: Number(props.lsl) ? Number(props.lsl) : 9999999999999,
              lineStyle: {
                color: "#A600FF",
                wideh: "1",
                type: "solide"
              },
              label: {
                position: "end",
                formatter: `LSL值${props.lsl}`,
                color: "#A600FF"
              }
            }
          ]
        }
      }
    ]
  };
};
setdata();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;
}
</style>
